<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>猫叫钢琴</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/TweenMax.min.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/vconsole.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <script>
        //自己做音频效果https://beatbucket.io/
        let octave = 4;
        let notes = ['C', 'C#', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'G#', 'A', 'Bb', 'B', 'C',];
        let keys = ['a', 'w', 's', 'e', 'd', 'f', 't', 'g', 'y', 'h', 'u', 'j', 'k',];
        let synth = new Tone.PolySynth(Tone.MonoSynth).toDestination();
        var synth2 = new Tone.PolySynth(Tone.Synth).toDestination();
        synth.set({
            "oscillator": {
                "type": "sawtooth",
            },
            "filter": {
                "Q": 6,
                "type": "bandpass",
                "rolloff": -12,
            },
            "envelope": {
                "attack": 0.1,
                "decay": 0.1,
                "sustain": 0.3,
                "release": 2,
            },
            "filterEnvelope": {
                "attack": 0.04,
                "attackCurve": "exponential",
                "decay": 0.5,
                "decayCurve": "exponential",
                "sustain": 0.3,
                "release": 0.6,
                "baseFrequency": 800,
                "octaves": 2,
            },
        });
        // let freeverb = new Tone.Freeverb(0.5, 3000).toDestination();
        let distort = new Tone.Distortion(0.5).toDestination();
        synth.chain(distort);
        window.addEventListener('keydown', keyDown, true);
        window.addEventListener('keyup', keyUp, true);
        let keyDict={};
        function keyDown(e) {
            var key = e.key.toLowerCase();
            if (!keyDict[key]) {
                keyDict[key] = true;
                for (let i = 0; i < 12; i++) { // controls assigning keys from c to b
                    if (key == keys[i]) {
                        synth.triggerAttackRelease(notes[i] + octave.toString(), "8n");
                    }
                }
            }
        }
        function keyUp(e) {
            var key = e.key.toLowerCase();
            console.log(key);
            keyDict[key] = false;
            if (key == 'arrowup') { octave += 1; }
            if (key == 'arrowdown') { octave -= 1; }
        }

        const moonjs = new MoonJs();
        const canvas=moonjs.createCanvasByMobile();
        moonjs.init(canvas)
        moonjs.start();//开始渲染
        const colors=ColorManager.warnCoolColors([2,3,5,6,9,10,11,9]);

        var [wid,hei,g]=[canvas.width/3,canvas.height/5,2];
        var [cx,cy]=[wid/2+g+5,hei/2+g+5];
        var rects=[];
        for(let i=0;i<keys.length-1;i++){
            let key=keys[i];
            let note=notes[i];
            let color=colors[Math.floor(i%7)]
            let rect=moonjs.createRectText(note,wid,hei,'#fff',color);
            rects.push(rect)
            rect.name=key;
            rect.childs[0].setFont("50px Arial")
            moonjs.mouseDown(rect,mouseDown);
            moonjs.mouseUp(rect,mouseUp);
        }
        Unify.displayRank(rects,3,0,0,wid/2,hei/2);
        let signs=['-','+'];
        rects=[];
        for(let i=0;i<signs.length;i++){
            let key=signs[i];
            let color=colors[Math.floor(i%7)]
            let rect=moonjs.createRectText(key,wid,hei,'#fff',color);
            rects.push(rect)
            rect.name=key;
            rect.childs[0].setFont("60px Arial")
            moonjs.mouseDown(rect,mouseDown);
            moonjs.mouseUp(rect,mouseUp);
        }
        Unify.displayRank(rects,2,wid,wid,wid/2,hei/2+hei*4);
        function mouseDown(o){
            let cc=o.name;
            o.setScale(0.9);
            TweenMax.killTweensOf(o)//删除动画 
            keyDown({key:cc});
            if(cc=='-'){
                octave -= 1;
                synth2.triggerAttackRelease('C4', "8n");
            } 
            if(cc=='+'){
                octave += 1;
                synth2.triggerAttackRelease('C5', "8n");
            }
        }
        function mouseUp(o){
            let cc=o.name;
            TweenMax.to(o,0.5,{scaleX:1,scaleY:1,ease:Bounce.easeOut})//增加动画
            keyUp({key:cc});
        }

    </script>
</body>

</html>